<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Nuxt爬坑指南 | Brennan&#39;s blog</title>
    <meta name="generator" content="VuePress 1.9.5">
    <link rel="icon" href="/brennan-wu-blog/img/favicon.ico">
    <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/brennan-wu-blog/assets/css/0.styles.6d0ebdc8.css" as="style"><link rel="preload" href="/brennan-wu-blog/assets/js/app.422e2e24.js" as="script"><link rel="preload" href="/brennan-wu-blog/assets/js/2.372f0770.js" as="script"><link rel="preload" href="/brennan-wu-blog/assets/js/3.22a0f36b.js" as="script"><link rel="preload" href="/brennan-wu-blog/assets/js/12.c046ebcf.js" as="script"><link rel="prefetch" href="/brennan-wu-blog/assets/js/10.9b0e0932.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/11.389398e0.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/13.ebdfb480.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/14.f75b9d1c.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/15.d20a3fd0.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/16.3816d4a5.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/17.bbbea7a6.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/18.214ef1b5.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/19.0363e8ba.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/20.a38f522d.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/21.6b18ffad.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/22.5c3876be.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/23.dcf195c4.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/24.7e75542f.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/25.9d5b9250.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/26.040652ab.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/27.b3041988.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/28.d5292c46.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/29.7ced233f.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/30.4856fc6c.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/31.0e508fe6.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/32.54efed0e.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/33.89aebe9c.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/34.124399ef.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/35.b1225438.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/36.8909f7ca.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/37.8321b812.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/38.4b637941.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/39.119a3f2c.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/4.28226b98.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/40.9624480f.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/41.df28c0a9.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/42.33d89136.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/43.04ab01ff.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/44.867b4caf.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/45.1337d2e2.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/5.e01b5955.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/6.4fe91b18.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/7.c836dcbd.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/8.85621850.js"><link rel="prefetch" href="/brennan-wu-blog/assets/js/9.5c2abfd9.js">
    <link rel="stylesheet" href="/brennan-wu-blog/assets/css/0.styles.6d0ebdc8.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/brennan-wu-blog/" class="home-link router-link-active"><img src="/brennan-wu-blog/img/logo.png" alt="Brennan's blog" class="logo"> <span class="site-name can-hide">Brennan's blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/brennan-wu-blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/brennan-wu-blog/study/" class="nav-link">学习笔记</a></div><div class="nav-item"><a href="/brennan-wu-blog/grow/" class="nav-link">成长笔记</a></div><div class="nav-item"><a href="/brennan-wu-blog/read/" class="nav-link">读书笔记</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="收藏导航" class="dropdown-title"><a href="/brennan-wu-blog/collection/" class="link-title">收藏导航</a> <span class="title" style="display:none;">收藏导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/pages/527bc4/" class="nav-link">我的导航</a></li><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/pages/c8836a/" class="nav-link">我的收藏</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/brennan-wu-blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/archives/" class="nav-link">归档</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/brennan-wu-blog/img/logo.png"> <div class="blogger-info"><h3>Brennan Wu</h3> <span>过度忙碌使你落后，有空别忘了给自己充电!</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/brennan-wu-blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/brennan-wu-blog/study/" class="nav-link">学习笔记</a></div><div class="nav-item"><a href="/brennan-wu-blog/grow/" class="nav-link">成长笔记</a></div><div class="nav-item"><a href="/brennan-wu-blog/read/" class="nav-link">读书笔记</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="收藏导航" class="dropdown-title"><a href="/brennan-wu-blog/collection/" class="link-title">收藏导航</a> <span class="title" style="display:none;">收藏导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/pages/527bc4/" class="nav-link">我的导航</a></li><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/pages/c8836a/" class="nav-link">我的收藏</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/brennan-wu-blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/brennan-wu-blog/archives/" class="nav-link">归档</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Vue.js</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/brennan-wu-blog/pages/0e263c/" class="sidebar-link">实用的vue自定义指令合集</a></li><li><a href="/brennan-wu-blog/pages/c86754/" aria-current="page" class="active sidebar-link">Nuxt爬坑指南</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第一节-nuxt-js相关概述" class="sidebar-link">第一节：nuxt.js相关概述</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-那服务器端渲染到底有什么好处呢" class="sidebar-link">1.那服务器端渲染到底有什么好处呢？</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-什么是ssr" class="sidebar-link">2.什么是SSR？</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第二节-nuxt环境搭建" class="sidebar-link">第二节：Nuxt环境搭建</a></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第三节-nuxt目录结构" class="sidebar-link">第三节：Nuxt目录结构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#目录结构介绍" class="sidebar-link">目录结构介绍</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#配置文件" class="sidebar-link">配置文件</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#nuxt运行命令" class="sidebar-link">Nuxt运行命令</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第四节-nuxt常用配置项" class="sidebar-link">第四节：Nuxt常用配置项</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-配置ip和端口" class="sidebar-link">1.配置IP和端口</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-配置全局css" class="sidebar-link">2.配置全局CSS</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_3-配置webpack的loader" class="sidebar-link">3.配置webpack的loader</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第五节-nuxt的路由配置和参数传递" class="sidebar-link">第五节：Nuxt的路由配置和参数传递</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-基本路由" class="sidebar-link">1.基本路由</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-页面跳转" class="sidebar-link">2.页面跳转</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_3-动态路由" class="sidebar-link">3.动态路由</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_4-跳转路由传递参数并且取值" class="sidebar-link">4.跳转路由传递参数并且取值</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_5-项目需求url优化" class="sidebar-link">5.项目需求url优化</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_6-路由参数校验" class="sidebar-link">6.路由参数校验</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_7-嵌套路由" class="sidebar-link">7.嵌套路由</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第六节-nuxt的路由动画效果" class="sidebar-link">第六节：Nuxt的路由动画效果</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-全局路由动画" class="sidebar-link">1.全局路由动画</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-单独设置页面动效" class="sidebar-link">2.单独设置页面动效</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第七节-nuxt的默认模版和默认布局" class="sidebar-link">第七节：Nuxt的默认模版和默认布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-默认模板" class="sidebar-link">1.默认模板</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-默认布局" class="sidebar-link">2.默认布局</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第八节-nuxt插件的使用" class="sidebar-link">第八节：Nuxt插件的使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-iview使用" class="sidebar-link">1.iview使用</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-mockjs使用" class="sidebar-link">2.mockjs使用</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第九节-nuxt的错误页面和个性meta设置" class="sidebar-link">第九节：Nuxt的错误页面和个性meta设置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-建立错误页面" class="sidebar-link">1.建立错误页面</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-个性meta设置" class="sidebar-link">2.个性meta设置</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第十二节-nuxt的跨域解决-拦截器" class="sidebar-link">第十二节：nuxt的跨域解决+拦截器</a></li><li class="sidebar-sub-header level2"><a href="/brennan-wu-blog/pages/c86754/#第十三节-爬坑" class="sidebar-link">第十三节：爬坑</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_1-nuxtservererror-connect-econnrefused-127-0-0-1-80" class="sidebar-link">1.NuxtServerError connect ECONNREFUSED 127.0.0.1:80</a></li><li class="sidebar-sub-header level3"><a href="/brennan-wu-blog/pages/c86754/#_2-axios-mockjs-request-upload-addeventlistener-is-not-a-function-的原因和解决办法" class="sidebar-link">2.Axios + mockjs: request.upload.addEventListener is not a function 的原因和解决办法</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Git</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-5712e8f9><div class="articleInfo" data-v-5712e8f9><ul class="breadcrumbs" data-v-5712e8f9><li data-v-5712e8f9><a href="/brennan-wu-blog/" title="首页" class="iconfont icon-home router-link-active" data-v-5712e8f9></a></li> <li data-v-5712e8f9><a href="/brennan-wu-blog/study/#学习笔记" data-v-5712e8f9>学习笔记</a></li><li data-v-5712e8f9><a href="/brennan-wu-blog/study/#Vue.js" data-v-5712e8f9>Vue.js</a></li></ul> <div class="info" data-v-5712e8f9><div title="作者" class="author iconfont icon-geren" data-v-5712e8f9><a href="https://github.com/wyd112821" target="_blank" title="作者" class="beLink" data-v-5712e8f9>Brennan Wu</a></div> <div title="创建时间" class="date iconfont icon-rili" data-v-5712e8f9><a href="javascript:;" data-v-5712e8f9>2022-09-18</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">Nuxt爬坑指南<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h1 id="nuxt爬坑指南"><a href="#nuxt爬坑指南" class="header-anchor">#</a> Nuxt爬坑指南</h1> <h2 id="第一节-nuxt-js相关概述"><a href="#第一节-nuxt-js相关概述" class="header-anchor">#</a> 第一节：nuxt.js相关概述</h2> <blockquote><p>nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）.Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。</p></blockquote> <h3 id="_1-那服务器端渲染到底有什么好处呢"><a href="#_1-那服务器端渲染到底有什么好处呢" class="header-anchor">#</a> 1.那服务器端渲染到底有什么好处呢？</h3> <blockquote><p>主要的原因时SPA（单页应用）不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目，就没必要使用这个框架了。</p></blockquote> <h3 id="_2-什么是ssr"><a href="#_2-什么是ssr" class="header-anchor">#</a> 2.什么是SSR？</h3> <blockquote><p>在认识SSR之前，首先对CSR与SSR之间做个对比。</p> <p>首先看一下传统的web开发，传统的web开发是，客户端向服务端发送请求，服务端查询数据库，拼接HTML字符串（模板），通过一系列的数据处理之后，把整理好的HTML返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的jsp,PHP,aspx也就是传统的MVC的开发。</p> <p>SPA应用，到了Vue、React，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式javaScript渲染出来的，称之为客户端渲染CSR。SPA渲染过程。由客户端访问URL发送请求到服务端，返回HTML结构（但是SPA的返回的HTML结构是非常的小的，只有一个基本的结构，如第一段代码所示）。客户端接收到返回结果之后，在客户端开始渲染HTML，渲染时执行对应javaScript，最后渲染template，渲染完成之后，再次向服务端发送数据请求，注意这里时数据请求，服务端返回json格式数据。客户端接收数据，然后完成最终渲染。</p> <p>SPA虽然给服务器减轻了压力，但是也是有缺点的：
1.首屏渲染时间比较长：必须等待JavaScript加载完毕，并且执行完毕，才能渲染出首屏。
2.SEO不友好：爬虫只能拿到一个div元素，认为页面是空的，不利于SEO。</p> <p>为了解决如上两个问题，出现了SSR解决方案，后端渲染出首屏的DOM结构返回，前端拿到内容带上首屏，后续的页面操作，再用单页面路由和渲染，称之为服务端渲染(SSR)。</p> <p>SSR渲染流程是这样的，客户端发送URL请求到服务端，服务端读取对应的url的模板信息，在服务端做出html和数据的渲染，渲染完成之后返回html结构，客户端这时拿到的之后首屏页面的html结构。所以用户在浏览首屏的时候速度会很快，因为客户端不需要再次发送ajax请求。并不是做了SSR我们的页面就不属于SPA应用了，它仍然是一个独立的spa应用。</p> <p>SSR是处于CSR与SPA应用之间的一个折中的方案，在渲染首屏的时候在服务端做出了渲染，注意仅仅是首屏，其他页面还是需要在客户端渲染的，在服务端接收到请求之后并且渲染出首屏页面，会携带着剩余的路由信息预留给客户端去渲染其他路由的页面。</p> <p>Nuxt.js特点（优点）：</p> <ul><li>基于Vue</li> <li>自动代码分层</li> <li>服务端渲染</li> <li>强大的路由功能，支持异步数据</li> <li>静态文件服务</li> <li>EcmaScript6和EcmaScript7的语法支持</li> <li>打包和压缩JavaScript和Css</li> <li>HTML头部标签管理</li> <li>本地开发支持热加载</li> <li>集成ESLint</li> <li>支持各种样式预编译器SASS、LESS等等</li> <li>支持HTTP/2推送</li></ul></blockquote> <h2 id="第二节-nuxt环境搭建"><a href="#第二节-nuxt环境搭建" class="header-anchor">#</a> 第二节：Nuxt环境搭建</h2> <blockquote><p>1.nuxt.js安装</p> <p>安装流程参考 <a href="https://www.nuxtjs.cn/guide/installation" target="_blank" rel="noopener noreferrer">官方<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>2.Nuxt 渲染流程</p></blockquote> <p><img src="https://cdn.staticaly.com/gh/wyd112821/Blogger@master/static_files/img/20210416164751.1qe2u3j7644g.webp" alt="20210416164751"></p> <blockquote><p>通过上面的流程图可以看出，当一个客户端请求进入的时候，服务端有通过nuxtServerInit这个命令执行在Store的action中，在这里接收到客户端请求的时候，可以将一些客户端信息存储到Store中，也就是说可以把在服务端存储的一些客户端的一些登录信息存储到Store中。之后使用了中间件机制，中间件其实就是一个函数，会在每个路由执行之前去执行，在这里可以做很多事情，或者说可以理解为是路由器的拦截器的作用。然后再validate执行的时候对客户端携带的参数进行校验，在asyncData与fetch进入正式的渲染周期，asyncData向服务端获取数据，把请求到的数据合并到Vue中的data中。</p></blockquote> <h2 id="第三节-nuxt目录结构"><a href="#第三节-nuxt目录结构" class="header-anchor">#</a> 第三节：Nuxt目录结构</h2> <h3 id="目录结构介绍"><a href="#目录结构介绍" class="header-anchor">#</a> 目录结构介绍</h3> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>└─my-nuxt-demo
  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件，比如日历组件、分页组件
  ├─layouts             // 布局目录，用于组织应用的布局组件，不可更改⭐
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改⭐
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static              // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐
  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。⭐
  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
  ├─package.json        // <span class="token function">npm</span> 包管理配置文件
  ├─README.md
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="配置文件"><a href="#配置文件" class="header-anchor">#</a> 配置文件</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'universal'</span><span class="token punctuation">,</span>  <span class="token comment">//  当前渲染使用模式</span>
  <span class="token comment">/*
  ** Headers of the page
  */</span>
  <span class="token literal-property property">head</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token comment">//  页面head配置信息</span>
    <span class="token literal-property property">title</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>npm_package_name <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">charset</span><span class="token operator">:</span> <span class="token string">'utf-8'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'viewport'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'width=device-width, initial-scale=1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">hid</span><span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>npm_package_description <span class="token operator">||</span> <span class="token string">''</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token punctuation">[</span>  <span class="token comment">//  favicon，若引用css不会进行打包处理</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">rel</span><span class="token operator">:</span> <span class="token string">'icon'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'image/x-icon'</span><span class="token punctuation">,</span> <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token string">'/favicon.ico'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/*
  ** Customize the progress-bar color
  */</span>
  <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment">//  页面进度条</span>
  <span class="token comment">/*
  ** Global CSS
  */</span>
  <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">[</span>  <span class="token comment">//  全局css（会进行webpack打包处理）</span>
    <span class="token string">'iview/dist/styles/iview.css'</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">/*
  ** Plugins to load before mounting the App
  */</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>   <span class="token comment">//  插件</span>
    <span class="token string">'@/plugins/iview'</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">/*
  ** Nuxt.js dev-modules
  */</span>
  <span class="token literal-property property">buildModules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">/*
  ** Nuxt.js modules
  */</span>
  <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">[</span>  <span class="token comment">//  模块</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">/*
  ** Build configuration
  */</span>
  <span class="token literal-property property">build</span><span class="token operator">:</span> <span class="token punctuation">{</span>   <span class="token comment">//  打包</span>
    <span class="token comment">/*  
    ** You can extend webpack config here
    */</span>
    <span class="token function">extend</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token punctuation">,</span> ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>   <span class="token comment">//  webpack自定义配置</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br></div></div><h3 id="nuxt运行命令"><a href="#nuxt运行命令" class="header-anchor">#</a> Nuxt运行命令</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token string-property property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token string-property property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;nuxt&quot;</span><span class="token punctuation">,</span>  <span class="token comment">//  开发环境</span>
  <span class="token string-property property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;nuxt build&quot;</span><span class="token punctuation">,</span>  <span class="token comment">//  打包</span>
  <span class="token string-property property">&quot;start&quot;</span><span class="token operator">:</span> <span class="token string">&quot;nuxt start&quot;</span><span class="token punctuation">,</span>  <span class="token comment">//  在服务端运行</span>
  <span class="token string-property property">&quot;generate&quot;</span><span class="token operator">:</span> <span class="token string">&quot;nuxt generate&quot;</span>  <span class="token comment">//  生成静态页面</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="第四节-nuxt常用配置项"><a href="#第四节-nuxt常用配置项" class="header-anchor">#</a> 第四节：Nuxt常用配置项</h2> <h3 id="_1-配置ip和端口"><a href="#_1-配置ip和端口" class="header-anchor">#</a> 1.配置IP和端口</h3> <blockquote><p>开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1000。</p> <p>/package.json</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token string-property property">&quot;config&quot;</span><span class="token operator">:</span><span class="token punctuation">{</span>
  <span class="token string-property property">&quot;nuxt&quot;</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token string-property property">&quot;host&quot;</span><span class="token operator">:</span><span class="token string">&quot;127.0.0.1&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;port&quot;</span><span class="token operator">:</span><span class="token string">&quot;1000&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>配置好后，我们在终端中输入npm run dev，然后你会看到服务地址改为了127.0.0.1:1000</p></blockquote> <h3 id="_2-配置全局css"><a href="#_2-配置全局css" class="header-anchor">#</a> 2.配置全局CSS</h3> <blockquote><p>在开发多页项目时，都会定义一个全局的CSS来初始化我们的页面渲染，比如把padding和margin设置成0，网上也有非常出名的开源css文件normailze.css。要定义这些配置，需要在nuxt.config.js里进行操作。</p> <p>比如现在我们要把页面字体设置为红色，就可以在assets/css/common.css文件，然后把字体设置为红色。</p> <p>/assets/css/common.css</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">html</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>/nuxt.config.js</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">css</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'~assets/css/normailze.css'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_3-配置webpack的loader"><a href="#_3-配置webpack的loader" class="header-anchor">#</a> 3.配置webpack的loader</h3> <blockquote><p>在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置,相关可参照此 <a href="https://www.cnblogs.com/ssh-007/p/7867954.html" target="_blank" rel="noopener noreferrer">链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/*
** 配置webpack的loader
*/</span>
<span class="token literal-property property">loaders</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">imgUrl</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="第五节-nuxt的路由配置和参数传递"><a href="#第五节-nuxt的路由配置和参数传递" class="header-anchor">#</a> 第五节：Nuxt的路由配置和参数传递</h2> <blockquote><p>Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。</p></blockquote> <h3 id="_1-基本路由"><a href="#_1-基本路由" class="header-anchor">#</a> 1.基本路由</h3> <blockquote><p>Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。</p> <p>假设 pages 的目录结构如下</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>└─pages
    ├─index<span class="token punctuation">.</span>vue
    └─user
      ├─index<span class="token punctuation">.</span>vue
      ├─one<span class="token punctuation">.</span>vue
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><blockquote><p>那么，Nuxt.js 自动生成的路由配置如下：</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'pages/index.vue'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'user'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/user'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'pages/user/index.vue'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'user-one'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/user/one'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'pages/user/one.vue'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_2-页面跳转"><a href="#_2-页面跳转" class="header-anchor">#</a> 2.页面跳转</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token number">1.</span> 不要写成a标签，因为是重新获取一个新的页面，并不是<span class="token constant">SPA</span>

<span class="token number">2.</span> <span class="token operator">&lt;</span>nuxt<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token string">&quot;/users&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>nuxt<span class="token operator">-</span>link<span class="token operator">&gt;</span>

<span class="token number">3.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3-动态路由"><a href="#_3-动态路由" class="header-anchor">#</a> 3.动态路由</h3> <ul><li><p>在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。</p></li> <li><p>获取动态参数</p></li></ul> <h3 id="_4-跳转路由传递参数并且取值"><a href="#_4-跳转路由传递参数并且取值" class="header-anchor">#</a> 4.跳转路由传递参数并且取值</h3> <blockquote><p>路由经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向新闻页面（news）传递个参数，然后在新闻页面进行简单的接收。</p> <p>（1）使用nuxt传递参数</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>ul<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>li<span class="token operator">&gt;</span><span class="token operator">&lt;</span>nuxt<span class="token operator">-</span>link <span class="token operator">:</span>to<span class="token operator">=</span><span class="token string">&quot;`informa/${item.newsCode}-${item.newsType}`&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>nuxt<span class="token operator">-</span>link<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><blockquote><p>注意：name其实指向的是路由（文件夹或文件名），而路由死活区分大小写的 ， 所以to后面区分大小写！！！建议文件夹都写成小写的。</p></blockquote> <p><img src="https://cdn.staticaly.com/gh/wyd112821/Blogger@master/static_files/img/20210420100155.603nnxe3d3g0.webp" alt="20210420100155"></p> <blockquote><p>（2）使用nuxt接收参数</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">async</span> <span class="token function">asyncData</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> newsCode <span class="token operator">=</span> context<span class="token punctuation">.</span>route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>code<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    <span class="token keyword">let</span> newsType <span class="token operator">=</span> context<span class="token punctuation">.</span>route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>code<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><blockquote><p>（3）使用this.$router.push的query传递参数</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 传递参数</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">' 路由 '</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> value<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 参数取值</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>key
<span class="token comment">// 注: 使用这种方式，传递参数会拼接在路由后面，出现在地址栏</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>（4）使用this.$router.push的params传递参数</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 传递参数</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">' 路由的name '</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> value<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 参数取值</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>key
<span class="token comment">// 注: 使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数</span>
<span class="token comment">// 注意: 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="_5-项目需求url优化"><a href="#_5-项目需求url优化" class="header-anchor">#</a> 5.项目需求url优化</h3> <blockquote><p>this.$route.query.key的方式参数显示在地址栏上, 但是并不是我们想要的, :id?id=``?</p> <p>所以建议还是尽量使用router-link来实现跳转来解决地址栏的变化,更方便网站的优化</p></blockquote> <h3 id="_6-路由参数校验"><a href="#_6-路由参数校验" class="header-anchor">#</a> 6.路由参数校验</h3> <blockquote><p>Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// nuxt中使用validate方法进行路由参数校验，这个方法必须返回一个布尔值，为true表示校验通过，为false表示校验失败。注意validate不能写到methods属性中。</span>
  <span class="token function">validate</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(obj);</span>
    <span class="token comment">// return true</span>
    <span class="token keyword">return</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d+$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_7-嵌套路由"><a href="#_7-嵌套路由" class="header-anchor">#</a> 7.嵌套路由</h3> <ol><li><p>添加一个Vue文件，作为父组件</p></li> <li><p>添加一个与父组件同名的文件夹来存放子视图组件</p></li> <li><p>在父文件中，添加组件，用于展示匹配到的子视图</p></li></ol> <blockquote><p>假设文件结构如：</p></blockquote> <p><img src="https://cdn.staticaly.com/gh/wyd112821/Blogger@master/static_files/img/20210420105106.7899d9je33c0.webp" alt="20210420105106"></p> <blockquote><p>Nuxt.js 自动生成的路由配置如下：</p></blockquote> <p><img src="https://cdn.staticaly.com/gh/wyd112821/Blogger@master/static_files/img/20210420105134.5qa9pz07pbk0.webp" alt="20210420105134"></p> <h2 id="第六节-nuxt的路由动画效果"><a href="#第六节-nuxt的路由动画效果" class="header-anchor">#</a> 第六节：Nuxt的路由动画效果</h2> <blockquote><p>路由的动画效果，也叫作页面的更换效果。Nuxt.js提供两种方法为路由提供动画效果，一种是全局的，一种是针对单独页面制作。</p></blockquote> <h3 id="_1-全局路由动画"><a href="#_1-全局路由动画" class="header-anchor">#</a> 1.全局路由动画</h3> <blockquote><p>全局动画默认使用page来进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个common.css文件。</p></blockquote> <blockquote><p>（1）添加样式文件</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.page-enter-active,
.page-leave-active</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> opacity 0.1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.page-enter,
.page-leave-active</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><blockquote><p>（2）文件配置</p> <p>然后在nuxt.config.js里加入一个全局的css文件就可以了。</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">css</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'assets/css/common.css'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>这时候在页面切换的时候就会有2秒钟的动画切换效果了，但是你会发现一些页面是没有效果的，这是因为你没有是&lt;nuxt-link&gt;组件来制作跳转链接。你需要进行更改。</p> <p>比如我们上节课作的动态路由新闻页，你就需要改成下面的链接。</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nuxt-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{name:'news-id',params:{id:123}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>News-1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nuxt-link</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_2-单独设置页面动效"><a href="#_2-单独设置页面动效" class="header-anchor">#</a> 2.单独设置页面动效</h3> <blockquote><p>想给一个页面单独设置特殊的效果时，我们只要在css里改变默认的page，然后在页面组件的配置中加入transition字段即可。例如，我们想给about页面加入一个字体放大然后缩小的效果，其他页面没有这个效果。</p> <p>（1）在全局样式assets/main.css 中添加以下内容</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.test-enter-active, .test-leave-active</span> <span class="token punctuation">{</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> all 2s<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span>12px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.test-enter, .test-leave-active</span> <span class="token punctuation">{</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p>（2）然后在about/index.vue组件中设置</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">export default</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span><span class="token string">'test'</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>这时候就有了页面的切换独特动效了。</p> <p>总结：在需要使用的页面导入即可。</p></blockquote> <h2 id="第七节-nuxt的默认模版和默认布局"><a href="#第七节-nuxt的默认模版和默认布局" class="header-anchor">#</a> 第七节：Nuxt的默认模版和默认布局</h2> <blockquote><p>在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模版。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模版比较方便，但是只能每个页面都引入。</p></blockquote> <h3 id="_1-默认模板"><a href="#_1-默认模板" class="header-anchor">#</a> 1.默认模板</h3> <blockquote><p>Nuxt为我们提供了超简单的默认模版订制方法，只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入“ 学习nuxt.js” 这几个字，我们就可以使用默认模版来完成。</p> <p>app.html中：</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
   {{ HEAD }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>学习nuxt.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    {{ APP }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><blockquote><p>这里的读取的是nuxt.config.js里的信息， 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写，如果小写会报错的。</p> <p>注意：如果你建立了默认模板后，记得要重启服务器，否则显示不会成功；但是默认布局是不用重启服务器的。</p></blockquote> <h3 id="_2-默认布局"><a href="#_2-默认布局" class="header-anchor">#</a> 2.默认布局</h3> <blockquote><p>默认模板类似的功能还有默认布局，但是从名字上你就可以看出来，默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于&lt;template&gt;标签下的内容统一订制。</p> <p>需求：我们在每个页面的最顶部放入“学习nuxt.js” 这几个字，看一下在默认布局里的实现。</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>学习nuxt.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nuxt</span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>这里的&lt;nuxt/&gt;就相当于我们每个页面的内容，你也可以把一些通用样式放入这个默认布局里，但会增加页面的复杂程度。</p></blockquote> <blockquote><p>总结：要区分默认模版和默认布局的区别，模版可以订制很多头部信息，包括IE版本的判断；布局只能定制&lt;template&gt;里的内容，跟布局有关系。在工作中修改时要看情况来编写代码。</p></blockquote> <h2 id="第八节-nuxt插件的使用"><a href="#第八节-nuxt插件的使用" class="header-anchor">#</a> 第八节：Nuxt插件的使用</h2> <h3 id="_1-iview使用"><a href="#_1-iview使用" class="header-anchor">#</a> 1.iview使用</h3> <ol><li><p>下载npm i element-ui -S</p></li> <li><p>在plugins文件夹下面，创建ElementUI.js文件</p></li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> iView <span class="token keyword">from</span> <span class="token string">'iview'</span>
<span class="token keyword">import</span> locale <span class="token keyword">from</span> <span class="token string">'iview/dist/locale/zh-CN'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>iView<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  locale
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="3"><li>在nuxt.config.js中添加配置</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token string">'iview/dist/styles/iview.css'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token string">'@/plugins/iview'</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-mockjs使用"><a href="#_2-mockjs使用" class="header-anchor">#</a> 2.mockjs使用</h3> <ol><li>安装依赖：</li></ol> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> mockjs --save-dev
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="2"><li>配置插件</li></ol> <blockquote><p>在 plugins/mock.js 建立一个 mock 的插件，我们就在这里模拟数据：</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//引入mockjs</span>
<span class="token keyword">const</span> Mock <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'mockjs'</span><span class="token punctuation">)</span>
<span class="token comment">// 获取 mock.Random 对象</span>
<span class="token keyword">const</span> Random <span class="token operator">=</span> Mock<span class="token punctuation">.</span>Random<span class="token punctuation">;</span>
<span class="token comment">//使用mockjs模拟数据</span>
Mock<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token string">'/api/data'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token comment">//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据</span>
    <span class="token keyword">let</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">30</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> listObject <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">csentence</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">//随机生成一段中文文本。</span>
            <span class="token literal-property property">company</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">csentence</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token literal-property property">attention_degree</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">9999</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">//返回一个随机的整数。</span>
            <span class="token literal-property property">photo</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string">'114x83'</span><span class="token punctuation">,</span> <span class="token string">'#00405d'</span><span class="token punctuation">,</span> <span class="token string">'#FFF'</span><span class="token punctuation">,</span> <span class="token string">'Mock.js'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>listObject<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">data</span><span class="token operator">:</span> list
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><ol start="3"><li>在 nuxt.config.js 添加插件：</li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token string">'@/plugins/mock'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>修改 xhr</p> <p>如果直接使用会报：</p> <p>request.upload.addEventListener is not a function</p> <p>错误，这是因为 mock 自己封装了一个基于 XMLHttpRequest 的 MockXMLHttpRequest 对象。</p> <p>找到 node_modules/mockjs/dist/mock.js 第 8305 行，在这之后添加一行：</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token class-name">MockXMLHttpRequest</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>upload <span class="token operator">=</span> <span class="token function">createNativeXMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>upload
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><img src="https://cdn.staticaly.com/gh/wyd112821/Blogger@master/static_files/img/20210420200847.1d8xwhwnudk.webp" alt="20210420200847"></p> <h2 id="第九节-nuxt的错误页面和个性meta设置"><a href="#第九节-nuxt的错误页面和个性meta设置" class="header-anchor">#</a> 第九节：Nuxt的错误页面和个性meta设置</h2> <blockquote><p>当用户输入路由错误的时候，我们需要给他一个明确的指引，所以说在应用程序开发中404页面是必不可少的。Nuxt.js支持直接在默认布局文件夹里建立错误页面。</p></blockquote> <h3 id="_1-建立错误页面"><a href="#_1-建立错误页面" class="header-anchor">#</a> 1.建立错误页面</h3> <blockquote><p>在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h2 v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;error.statusCode==404&quot;</span><span class="token operator">&gt;</span><span class="token number">404</span>页面不存在<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h2 v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">&gt;</span><span class="token number">500</span>服务器错误<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>ul<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>li<span class="token operator">&gt;</span><span class="token operator">&lt;</span>nuxt<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token string">&quot;/&quot;</span><span class="token operator">&gt;</span><span class="token constant">HOME</span><span class="token operator">&lt;</span><span class="token operator">/</span>nuxt<span class="token operator">-</span>link<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">props</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'error'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><blockquote><p>代码用v-if进行判断错误类型，需要注意的是这个错误是你需要在&lt;script&gt;里进行声明的，如果不声明程序是找不到error.statusCode的。</p> <p>这里我也用了一个&lt;nuxt-link&gt;的简单写法直接跟上路径就可以了。</p></blockquote> <h3 id="_2-个性meta设置"><a href="#_2-个性meta设置" class="header-anchor">#</a> 2.个性meta设置</h3> <blockquote><p>页面的Meta对于SEO的设置非常重要，比如你现在要作个新闻页面，那为了搜索引擎对新闻的收录，需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。</p> <p>1.我们先把pages/news/index.vue页面的链接进行修改一下，传入一个title，目的是为了在新闻具体页面进行接收title，形成文章的标题。</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token operator">&lt;</span>li<span class="token operator">&gt;</span><span class="token operator">&lt;</span>nuxt<span class="token operator">-</span>link <span class="token operator">:</span>to<span class="token operator">=</span><span class="token string">&quot;{name:'news-id',params:{id:123,title:'nuxt.com'}}&quot;</span><span class="token operator">&gt;</span>News<span class="token operator">-</span><span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>nuxt<span class="token operator">-</span>link<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>2.第一步完成后，我们修改/pages/news/_id.vue，让它根据传递值变成独特的meta和title标签。</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h2<span class="token operator">&gt;</span>News<span class="token operator">-</span>Content <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">{</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>ul<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>li<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">&quot;/&quot;</span><span class="token operator">&gt;</span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">validate</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> params <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// Must be a number</span>
    <span class="token keyword">return</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d+$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span><span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//独立设置head信息</span>
  <span class="token function">head</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span><span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span>
        <span class="token literal-property property">meta</span><span class="token operator">:</span><span class="token punctuation">[</span>
          <span class="token punctuation">{</span><span class="token literal-property property">hid</span><span class="token operator">:</span><span class="token string">'description'</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'news'</span><span class="token punctuation">,</span><span class="token literal-property property">content</span><span class="token operator">:</span><span class="token string">'This is news page'</span><span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><blockquote><p>注意：为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。</p></blockquote> <h2 id="第十二节-nuxt的跨域解决-拦截器"><a href="#第十二节-nuxt的跨域解决-拦截器" class="header-anchor">#</a> 第十二节：nuxt的跨域解决+拦截器</h2> <blockquote><p>安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块</p></blockquote> <blockquote><p>注意：不需要手动注册 @nuxt js/proxy 模块，但是必须要确保它在依赖项中。</p></blockquote> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> @nuxtjs/axios @nuxtjs/proxy <span class="token parameter variable">--save</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>在 nuxt.config.js 文件里面添加以下配置：</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/*
** Nuxt.js modules
*/</span>
<span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token string">'@nuxtjs/axios'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">/*
** axios proxy
*/</span>
<span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/api'</span><span class="token punctuation">,</span> <span class="token comment">// baseURL</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">/*
** proxy
*/</span>
<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token string-property property">&quot;/api&quot;</span><span class="token operator">:</span> <span class="token string">&quot;http://localhost:3000&quot;</span> <span class="token comment">// 代理地址</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><blockquote><p>如果需要额外配置 axios，可以通过 plugins 来进行配置。在 /plugins 目录下增加 axios.js ，并引进配置文件。 如下：</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'@/plugins/axios'</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><blockquote><p>定义axios的拦截器，定义请求的各个阶段需要进行的处理</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> $axios<span class="token punctuation">,</span> redirect <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 基本配置</span>
  $axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>timeout <span class="token operator">=</span> <span class="token number">10000</span>
  $axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>headers <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/json;charset=UTF-8'</span> <span class="token punctuation">}</span>
  $axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>transformRequest <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 将参数对象转成JSON形式</span>
    data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token keyword">return</span> data
  <span class="token punctuation">}</span><span class="token punctuation">]</span>

  <span class="token comment">// 请求拦截器</span>
  $axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// 在发送请求之前做些什么</span>
      <span class="token keyword">return</span> config
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// 处理请求错误</span>
      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">)</span>

  <span class="token comment">// 请求回调</span>
  $axios<span class="token punctuation">.</span><span class="token function">onRequest</span><span class="token punctuation">(</span><span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Making request to '</span> <span class="token operator">+</span> config<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token comment">// 响应拦截器</span>
  $axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token comment">/**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */</span>
    <span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> response<span class="token punctuation">.</span>data
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'err'</span> <span class="token operator">+</span> error<span class="token punctuation">)</span> <span class="token comment">// for debug</span>

      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">)</span>

  <span class="token comment">// 错误回调</span>
  $axios<span class="token punctuation">.</span><span class="token function">onError</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> code <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response <span class="token operator">&amp;&amp;</span> error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">===</span> <span class="token number">400</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">===</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">'/500'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br></div></div><h2 id="第十三节-爬坑"><a href="#第十三节-爬坑" class="header-anchor">#</a> 第十三节：爬坑</h2> <h3 id="_1-nuxtservererror-connect-econnrefused-127-0-0-1-80"><a href="#_1-nuxtservererror-connect-econnrefused-127-0-0-1-80" class="header-anchor">#</a> 1.NuxtServerError connect ECONNREFUSED 127.0.0.1:80</h3> <blockquote><p>原因: asyncData方法异步请求数据时，以为/api/${params.id}这个接口的网址是 127.0.0.1:80, 所以将请求发送给了127.0.0.1:80，而我的接口服务器并没有跑在80端口上，所以报错。</p></blockquote> <blockquote><p>解决方法:</p></blockquote> <ol><li>将node服务器端口改成 127.0.0.1:80</li> <li>将接口服务器端口改成 127.0.0.1:80</li> <li>将asyncData方法使用的请求url加上域名+端口，如下所示</li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">asyncData</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> params <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://127.0.0.1:3000/api/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-axios-mockjs-request-upload-addeventlistener-is-not-a-function-的原因和解决办法"><a href="#_2-axios-mockjs-request-upload-addeventlistener-is-not-a-function-的原因和解决办法" class="header-anchor">#</a> 2.Axios + mockjs: request.upload.addEventListener is not a function 的原因和解决办法</h3> <blockquote><p>导致这一问题的根本原因是 Mockjs 中, 封装了原生的 XMLHttpRequest 为 MockXMLHttpRequest.
解决思路是, 把原生 XMLHttpRequest 的 upload 属性赋给 MockXMLHttpRequest 的原型对象.在 node_modules/mockjs/dist/mock.js 加入以下代码:</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//Handel &quot;request.upload.addEventListener is not a function&quot;</span>
<span class="token class-name">MockXMLHttpRequest</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>upload <span class="token operator">=</span> <span class="token function">createNativeXMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>upload
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><img src="https://cdn.staticaly.com/gh/wyd112821/Blogger@master/static_files/img/20210416153232.40epvnr97ic0.webp" alt="20210416153232"></p></div></div> <!----> <div class="page-edit"><!----> <div class="tags"><a href="/brennan-wu-blog/tags/?tag=Nuxt" title="标签">#Nuxt</a></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/04/26, 07:29:08</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/brennan-wu-blog/pages/0e263c/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">实用的vue自定义指令合集</div></a> <a href="/brennan-wu-blog/pages/637e61/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">个人博客搭建部署</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/brennan-wu-blog/pages/0e263c/" class="prev">实用的vue自定义指令合集</a></span> <span class="next"><a href="/brennan-wu-blog/pages/637e61/">个人博客搭建部署</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/brennan-wu-blog/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/brennan-wu-blog/pages/8a0173/"><div>
            职业路线：前端工程师的晋升逻辑到底是什么
            <!----></div></a> <span class="date">05-02</span></dt></dl><dl><dd>02</dd> <dt><a href="/brennan-wu-blog/pages/c002a8/"><div>
            《从技术走向管理：李元芳履职记》读书笔记
            <!----></div></a> <span class="date">04-15</span></dt></dl><dl><dd>03</dd> <dt><a href="/brennan-wu-blog/pages/2641af/"><div>
            解读《真希望我父母读过这本书》
            <!----></div></a> <span class="date">11-28</span></dt></dl> <dl><dd></dd> <dt><a href="/brennan-wu-blog/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:985979261@qq.com" title="发邮件" target="_blank" class="iconfont icon-juchangxinxiang"></a><a href="https://github.com/wyd112821" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://gitee.com/wuyadong112821" title="gitee" target="_blank" class="iconfont icon-gitee"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2022-2023
    <span>Brennan Wu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-262" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-43_zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
    <script src="/brennan-wu-blog/assets/js/app.422e2e24.js" defer></script><script src="/brennan-wu-blog/assets/js/2.372f0770.js" defer></script><script src="/brennan-wu-blog/assets/js/3.22a0f36b.js" defer></script><script src="/brennan-wu-blog/assets/js/12.c046ebcf.js" defer></script>
  </body>
</html>
